<template>
	<view class="main">
		<view class="top">
			<image src="@/static/personalbackground.png" mode="" style="width: 100%; height: 100%; object-fit: cover">
			</image>

			<view class="avatarBox tc">
				<view class="img-avatar">
					<avatar :name="getUserInfoName || ''" :size="'verybig'" />
				</view>
				<view class="avatarBoxTips" v-if="getIslogin">
					<view class="overflow-ellipsis margin-bottom10">

					</view>

				</view>
				<view class="avatarBoxTips" v-else>
					<view class="overflow-ellipsis margin-bottom10 f12" @click="toLogin">
						<text>请先登录，点击跳转</text>
					</view>
				</view>
			</view>
			<view class="water">
				<view class="water-c">
					<view class="water-1"></view>
					<view class="water-2"></view>
				</view>
			</view>
		</view>
		<view class="bottom" style="position: relative;min-height: 300px;">
			<view class="bottom_body" v-if="getIslogin">
				<view class="bottom_body_item bt">
					<view class="left">
						<view class="item_left">
							<image src="@/static/team.png" mode="" style="width: 100%; height: 100%"></image>
						</view>
						<view class="item_left_text f16">用户名</view>
					</view>
					<view class="flex-row h100">
						<view class="commonText f14">{{ getUserInfoUserName || "" }}</view>

					</view>
				</view>
				<view class="bottom_body_item bt" @click="updatePassword">
					<view class="left">
						<view class="item_left">
							<image src="@/static/studenNum.png" mode="" style="width: 100%; height: 100%"></image>
						</view>
						<view class="item_left_text f16">修改密码</view>
					</view>
					<view class="flex-row h100">
						<view class="commonText f14">{{ userInfo.stuNum || "" }}</view>
						<view class="item_leftjiantou">
							<image src="@/static/rightjiantou.png" mode="" style="width: 100%; height: 100%"></image>
						</view>
					</view>
				</view>

				<view class="bottom_body_item bt" @click="feedback">
					<view class="left">
						<view class="item_left">
							<image src="@/static/response.png" mode="" style="width: 100%; height: 100%"></image>
						</view>
						<view class="item_left_text f16">问题反馈</view>
					</view>

					<view class="item_leftjiantou">
						<image src="@/static/rightjiantou.png" mode="" style="width: 100%; height: 100%"></image>
					</view>
				</view>

				<view class="bottom_body_item bt" v-if="getIslogin" @click="goOut">
					<view class="left">
						<view class="item_left">
							<image src="@/static/bisaiChecked.png" mode="" style="width: 100%; height: 100%"></image>
						</view>
						<view class="item_left_text f16">退出登录</view>
					</view>

					<view class="item_leftjiantou">
						<image src="@/static/rightjiantou.png" mode="" style="width: 100%; height: 100%"></image>
					</view>
				</view>
			</view>
			<view v-else
				style="width: 100%;text-align: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
				没有信息，请登录使用</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import store from '@/store/index.js'
	import avatar from "../../components/common/avatar/index.vue";
	export default {
		components: {
			avatar,
		},
		data() {
			return {
				userInfo: null,
			};
		},
		computed: {
			...mapGetters(["getIslogin", "getUserInfoName", "getUserInfoUserName"]),
			getNumber() {
				return store?.userInfo?.name || ''
			},
			getId() {
				return store?.userInfo?.id || ''
			},
			getRole() {
				return store?.userInfo?.role || ''
			},
		},
		methods: {

			toLogin() {
				uni.navigateTo({
					url: "/pages/login/index",
				});
			},
			goOut() {
				uni.showModal({
					cancelColor: "red",
					cancelText: "再想想",
					confirmText: "确定",
					title: "提示",
					content: "请确认是否退出账号",
					success: async (res) => {
						if (res.confirm) {
							this.$resetToken()
							this.$removeStorage('userInfo')
							this.$removeStorage('clockTime')
							this.$removeStorage('photoTime')
							this.$store.commit('resetAll')
							this.$errMessageToast('退出登录成功')
							setTimeout(() => {
								uni.redirectTo({
									url: "/pages/login/index"
								})
							}, 800)

						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			},
			updatePassword() {
				uni.navigateTo({
					url: "/pages/personal/updatePassword/index",
				});
			},
			feedback() {
				uni.navigateTo({
					url: "/pages/personal/feedback/feddback",
				});
			},

		},

	};
</script>

<style lang="less">
	.main {
		width: 100%;
		height: 100vh;
		background-color: #f5f5f5;

		.middle {
			background-color: #fff;
			padding: 15px 35rpx 15rpx 35rpx;

			&_item {
				flex: 1;
				align-items: center;

				&_top {
					width: 60rpx;
					height: 60rpx;
				}

				&_bot {
					color: #b0b9bb;
					font-weight: 300;
					margin-top: 5px;
				}
			}
		}

		& .page {
			background: #f6f5f8;
		}

		& .top {
			width: 100%;
			height: 380rpx;
			position: relative;
		}

		& .bottom {
			width: 100%;
			box-sizing: border-box;
			padding: 35rpx 35rpx;
			color: #888;
			height: auto;

			&_body {
				background-color: #fefefe;

				border-radius: 20rpx 20rpx 20rpx 20rpx;
				box-shadow: 0 4px 8px 2px #f0f1f1 !important;

				&_item {
					padding: 35rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					& .left {
						display: flex;
						align-items: center;

						&_text {
							color: #b0b9bb;
							font-weight: 300;
						}
					}

					& .item_left {
						width: 45rpx;
						height: 45rpx;
						margin: 0 15rpx;
					}

					& .item_leftjiantou {
						width: 30rpx;
						height: 30rpx;
						transform: translateY(-2rpx);
					}
				}
			}
		}
	}

	.water {
		position: absolute;
		left: 0;
		bottom: -10px;
		height: 60rpx;
		width: 100%;
		z-index: 1;
	}

	.water-c {
		position: relative;
	}

	.water-1 {
		background: url("") repeat-x;
		background-size: 600px;
		-webkit-animation: wave-animation-1 3.5s infinite linear;
		animation: wave-animation-1 3.5s infinite linear;
	}

	.water-2 {
		top: 5px;
		background: url("") repeat-x;
		background-size: 600px;
		-webkit-animation: wave-animation-2 6s infinite linear;
		animation: wave-animation-2 6s infinite linear;
	}

	.water-1,
	.water-2 {
		position: absolute;
		width: 100%;
		height: 60rpx;
	}

	.back-white {
		background: #fff;
	}

	@keyframes wave-animation-1 {
		0% {
			background-position: 0 top;
		}

		100% {
			background-position: 600px top;
		}
	}

	@keyframes wave-animation-2 {
		0% {
			background-position: 0 top;
		}

		100% {
			background-position: 600px top;
		}
	}

	//

	.avatarBox {
		width: 100%;
		height: auto;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		left: 50%;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.avatarBoxTips {
		padding: 0 80rpx;
	}

	.img-avatar {
		display: inline-block;
		overflow: hidden;
		width: 128rpx;
		height: 128rpx;
		margin: 29rpx 29rpx 5rpx 29rpx;
		border-radius: 50%;
		box-shadow: 4px 4px 4px -4px #7c7c7e;
	}
</style>
